<!--
 * @Author: zhangmengqiong
 * @Date: 2021-04-30 14:52:24
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-04-30 16:40:54
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>g2实现折线图</title>
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.1.16/dist/g2.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    // 初始化
    // 内容
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ];
    // 创建G2图表示例化
    const chart = new G2.Chart({
      container: 'container',
      autoFit: true,
      height: 500,
    });

    chart.data(data);
    chart.axis('value', {
      label: {
        formatter: val => {
          return +val + 'k';
        },
      },
    });
    chart.scale({
      year: {
        range: [0, 1],
      },
      value: {
        min: 0,
        nice: true,
      },
    });
    chart.tooltip({
      showCrosshairs: true, // 展示 Tooltip 辅助线
      shared: true,
    });
    chart.line().position('year*value').label('value').color('#ff5957');
    chart.point().position('year*value').color('#ff5957');
    chart.render();
  </script>
</html>
